import { Menu } from 'antd';
import React from "react";
import { BrowserRouter, Route, Link, Switch, Redirect } from 'react-router-dom';
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import RouterDemo1 from "./router1"
const { SubMenu } = Menu;

export default class Sider extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: ""
        }
    }
    handleClick = (e) => {
        // this.props.valuepath(e)
        // console.log(e)
        this.setState(
            this.state = {
                value: e.key
            }
        )
    };

    render() {
        return (
            <BrowserRouter BrowserRouter >
                <Menu
                    onClick={this.handleClick}
                    style={{ width: 256 }}
                    defaultSelectedKeys={['1']}
                    defaultOpenKeys={['sub1']}
                    mode="inline"
                >
                    <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
                        <Menu.ItemGroup key="g1" title="Item 1">
                            <Menu.Item key="1"><Link to="/Option1">Option 1</Link></Menu.Item>
                            <Menu.Item key="2"><Link to="/Option2">Option 2</Link></Menu.Item>
                        </Menu.ItemGroup>
                        <Menu.ItemGroup key="g2" title="Item 2">
                            <Menu.Item key="3"><Link to="/Option3">Option 3</Link></Menu.Item>
                            <Menu.Item key="4"><Link to="/Option4">Option 4</Link></Menu.Item>
                        </Menu.ItemGroup>
                    </SubMenu>
                    <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
                        <Menu.Item key="5"><Link to="/Option5">Option 5</Link></Menu.Item>
                        <Menu.Item key="6"><Link to="/Option6">Option 6</Link></Menu.Item>
                        <SubMenu key="sub3" title="Submenu">
                            <Menu.Item key="7"><Link to="/Option7">Option 7</Link></Menu.Item>
                            <Menu.Item key="8"><Link to="/Option8">Option 8</Link></Menu.Item>
                        </SubMenu>
                    </SubMenu>
                    <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
                        <Menu.Item key="9"><Link to="/Option9">Option 9</Link></Menu.Item>
                        <Menu.Item key="10"><Link to="/Option10">Option 10</Link></Menu.Item>
                        <Menu.Item key="11"><Link to="/Option11">Option 11</Link></Menu.Item>
                        <Menu.Item key="12"><Link to="/Option12">Option 12</Link></Menu.Item>
                    </SubMenu>
                </Menu >
                <Switch>
                    <RouterDemo1 value={this.state.value}></RouterDemo1>
                </Switch>
            </BrowserRouter>
        );
    }
}
